<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>PanelLayout | GoJS API</title>
	<meta name="description" content="Documentation for GoJS API">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../assets/css/style.css">
	<link rel="stylesheet" href="../assets/css/main.css">
	<script async src="../assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
	<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
		<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
			<div class="md:pl-4">
				<a class="text-white hover:text-white no-underline hover:no-underline
				font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html">
				<h1 class="mb-0 p-1 leading-none">GoJS</h1>
				</a>
			</div>
			<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
				<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
					<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
					<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
				</svg>
			</button>
			<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
				<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
					target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
					target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
				</ul>
			</div>
		</div>
		<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
	</nav>
	<div class="tsd tsd-page-header">
		<div class="tsd-page-toolbar">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="table-wrap">
					<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
						<div class="field">
							<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
							<input id="tsd-search-field" type="text" />
						</div>
						<ul class="results">
							<li class="state loading">Preparing search index...</li>
							<li class="state failure">The search index is not available</li>
						</ul>
						<a href="../index.html" class="title">GoJS API</a>
					</div>
					<div class="table-cell" id="tsd-widgets">
						<div id="tsd-filter">
							<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
							<div class="tsd-filter-group">
								<div class="tsd-select" id="tsd-filter-visibility">
									<span class="tsd-select-label">All</span>
									<ul class="tsd-select-list">
										<li data-value="public">Public</li>
										<li data-value="protected">Public/Protected</li>
										<li data-value="private" class="selected">All</li>
									</ul>
								</div>
							</div>
						</div>
						<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
					</div>
				</div>
			</div>
		</div>
		<div class="tsd tsd-page-title">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="top-copyright">
					<b>GoJS</b>&reg; Diagramming Components<br/>version 2.1.56<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
				</div>
				<div>
					<h1>Class PanelLayout</h1>
				</div>
			</div>
		</div>
	</div>
</header>
<div class="tsd w-full max-w-screen-xl mx-auto pb-4">
	<div class="row px-2 w-full">
		<div class="col-8 col-content">
			<section class="tsd-panel tsd-hierarchy">
				<h3>Hierarchy</h3>
				<ul class="tsd-hierarchy">
					<li>
						<span class="target">PanelLayout</span>
						<ul class="tsd-hierarchy">
							<li>
								<a href="PanelLayoutFlow.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayoutFlow</a>
							</li>
						</ul>
					</li>
				</ul>
			</section>
			<section class="tsd-panel tsd-comment">
				<div class="tsd-comment tsd-typography">
					<p>This is the abstract base class for all Panel Layouts, which inform the possible Panel types.
						It is possible to create your own Panel type by creating a subclass of PanelLayout,
					though this is not common and not recommended for beginners.</p>
					<p>By default, GoJS has 12 Panel types, each corresponding to a PanelLayout subclass:</p>
					<ul>
						<li><code>&#39;Position&#39;, PanelLayoutPosition</code></li>
						<li><code>&#39;Horizontal&#39;, PanelLayoutHorizontal</code></li>
						<li><code>&#39;Vertical&#39;, PanelLayoutVertical</code></li>
						<li><code>&#39;Spot&#39;, PanelLayoutSpot</code></li>
						<li><code>&#39;Auto&#39;, PanelLayoutAuto</code></li>
						<li><code>&#39;Table&#39;, PanelLayoutTable</code></li>
						<li><code>&#39;Viewbox&#39;, PanelLayoutViewbox</code></li>
						<li><code>&#39;TableRow&#39;, PanelLayoutTableRow</code></li>
						<li><code>&#39;TableColumn&#39;, PanelLayoutTableColumn</code></li>
						<li><code>&#39;Link&#39;, PanelLayoutLink</code></li>
						<li><code>&#39;Grid&#39;, PanelLayoutGrid</code></li>
						<li><code>&#39;Graduated&#39;, PanelLayoutGraduated</code></li>
					</ul>
					<p>These are included by default in builds of <code>go.js</code> and <code>go-debug.js</code>.
						When building from source, you can optionally exclude all of them except <code>Position</code>,
						<code>Vertical</code>, <code>Auto</code>, <code>Link</code>, and <code>Grid</code>.
					This is demonstrated in <code>minimalSource</code> and <code>maximalSource</code>, in the <code>/projects</code> folder.</p>
					<p>Registering a new PanelLayout is done by calling the static function, <a href="Panel.html#static-definePanelLayout">Panel.definePanelLayout</a>:</p>
					<pre><code class="language-js"><span style="color: #9CDCFE">Panel</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">definePanelLayout</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#039;Table&#039;</span><span style="color: #D4D4D4">, </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">PanelLayoutCustom</span><span style="color: #D4D4D4">());</span>
</code></pre>
					<p>Each PanelLayout must define a <a href="PanelLayout.html#measure">measure</a> and <a href="PanelLayout.html#arrange">arrange</a> method.
						The measure method must call <a href="PanelLayout.html#measureElement">measureElement</a> with each element of the Panel,
						which sets each element&#39;s <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a>. These bounds can be used to determine object layout.
						The arrange method must call <a href="PanelLayout.html#arrangeElement">arrangeElement</a> with each element of the Panel to position the objects relative to the Panel.
					Remember that each Panel defines its own coordinate system, which is used for sizing and positioning of the panel&#39;s elements.</p>
					<p>There is an example PanelLayout in the <a href="../../samples/panelLayout.html">PanelLayout sample</a>.
						There is a Flow PanelLayout extension at <a href="PanelLayoutFlow.html">PanelLayoutFlow</a>, demonstrated at
					<a href="../../extensionsJSM/PanelLayoutFlow.html">Flow PanelLayout sample</a>.</p>
					<dl class="tsd-comment-tags">
						<dt>since</dt>
						<dd><p>2.0</p>
						</dd>
					</dl>
				</div>
			</section>
			<section class="tsd-panel-group tsd-index-group">
				<h2>Index</h2>
				<section class="tsd-panel tsd-index-panel">
					<div class="tsd-index-content">
						<section class="tsd-index-section ">
							<h3>Constructors</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="PanelLayout.html#constructor" class="tsd-kind-icon">constructor</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Properties</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="PanelLayout.html#name" class="tsd-kind-icon">name</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Methods</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#arrange" class="tsd-kind-icon">arrange</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="PanelLayout.html#arrangeElement" class="tsd-kind-icon">arrange<wbr>Element</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="PanelLayout.html#measure" class="tsd-kind-icon">measure</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="PanelLayout.html#measureElement" class="tsd-kind-icon">measure<wbr>Element</a></li>
							</ul>
						</section>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Constructors</h2>
				<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
					<a name="constructor" class="tsd-anchor"></a>
					<h3>
						constructor
					</h3>
					<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">new <wbr>Panel<wbr>Layout<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="PanelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayout</a></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>This class is abstract.  Define your own subclass if you want to implement a custom panel layout.</p>
							</div>
							<h4 class="tsd-returns-title">Returns <a href="PanelLayout.html" class="tsd-signature-type" data-tsd-kind="Class">PanelLayout</a></h4>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Properties</h2>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="name" class="tsd-anchor"></a>
					<h3>
						name
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the name of this instance of a particular panel layout.</p>
							</div>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Methods</h2>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="arrange" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagVirtual">Virtual</span>
						arrange
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">arrange<span class="tsd-signature-symbol">(</span>panel<span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a>, elements<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span>, union<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>After measuring, a Panel must arrange each element, giving the elements a position and size in the Panel&#39;s coordinate system.
								This must call <a href="PanelLayout.html#arrangeElement">arrangeElement</a> with each Panel element, which will set that element&#39;s <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>.</p>
								<p>For arranging some elements, it is useful to know the total unioned area of every element, which is given as the <code>union</code> argument.
								This Rect can be used to right-align or center-align, etc, elements within an area.</p>
								<p>For example, PanelLayoutHorizontal arranges each element sequentially, starting with an <code>x</code> value of <code>0</code>,
									and increasing it by each previous element&#39;s <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> <code>width</code>.
									The horizontal Panel arranges each element with a <code>y</code> value determined by  the <code>union</code> argument&#39;s <code>height</code>
								considering the <a href="GraphObject.html#alignment">GraphObject.alignment</a> of the element, and the GraphObject&#39;s own <code>measuredBounds.height</code>.</p>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>panel: <a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>Panel which called this layout</p>
									</div>
								</li>
								<li>
									<h5>elements: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>Array of Panel elements</p>
									</div>
								</li>
								<li>
									<h5>union: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>rectangle, if properly constructed in <a href="PanelLayout.html#measure">measure</a>, that contains the expected union bounds of every element in the Panel.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
					<a name="arrangeElement" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagProtected">Protected</span>
						arrange<wbr>Element
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
						<li class="tsd-signature tsd-kind-icon">arrange<wbr>Element<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>, x<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, y<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, clipRect<span class="tsd-signature-symbol">?: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Arranges the GraphObject onto its parent Panel.
									The passed-in numbers typically account for <a href="GraphObject.html#margin">GraphObject.margin</a> and other offsets.
									The <code>x</code> and <code>y</code> coordinates are where GraphObjects will be placed within the Panel&#39;s own coordinates
								(from the Panel&#39;s top-left corner). The <code>width</code> and <code>height</code> are the size it will take up within the Panel&#39;s coordinates.</p>
								<p>This sets the <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a> of the <code>obj</code>.</p>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>GraphObject to be arranged.</p>
									</div>
								</li>
								<li>
									<h5>x: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The final x value of actualBounds that the Panel computes for the GraphObject.</p>
									</div>
								</li>
								<li>
									<h5>y: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The final y value of actualBounds that the Panel computes for the GraphObject.</p>
									</div>
								</li>
								<li>
									<h5>width: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The final width value of actualBounds that the Panel computes for the GraphObject.</p>
									</div>
								</li>
								<li>
									<h5>height: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The final height value of actualBounds that the Panel computes for the GraphObject.</p>
									</div>
								</li>
								<li>
									<h5><span class="tsd-flag ts-flagOptional">Optional</span> clipRect: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>an optional area to constrain this actualBounds to when picking and drawing.
										By default, this is only used with Table Panel elements, which are clipped to their cell sizes.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="measure" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagVirtual">Virtual</span>
						measure
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">measure<span class="tsd-signature-symbol">(</span>panel<span class="tsd-signature-symbol">: </span><a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, elements<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span>, union<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a>, minw<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, minh<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Given the available size, measure the Panel and
								determine its expected drawing size.</p>
								<p>This must call <a href="PanelLayout.html#measureElement">measureElement</a> with each Panel element, which will set the
									<a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> of those elements. Depending on how the Panel intends to lay out its elements,
									the programmer must construction the <code>union</code> by setting <code>union.width</code> and <code>union.height</code> of the supplied argument.
									For example PanelLayoutHorizontal measures its elements and sums their widths to set its <code>union.width</code>,
								and takes the maximum of their heights to set its <code>union.height</code>.</p>
								<p>This union must reflect the measured size of the Panel. After measure is called, the Panel class will modify this union Rect,
									constraining its size by the Panel&#39;s <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a>, <a href="GraphObject.html#minSize">GraphObject.minSize</a>, and <a href="GraphObject.html#maxSize">GraphObject.maxSize</a>,
								before passing it to <a href="PanelLayout.html#arrange">arrange</a>.</p>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>panel: <a href="Panel.html" class="tsd-signature-type" data-tsd-kind="Class">Panel</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>Panel which called this layout</p>
									</div>
								</li>
								<li>
									<h5>width: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>expected width of the Panel, informed by any containing Panel and by the Panel&#39;s own
											<a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a>, <a href="GraphObject.html#minSize">GraphObject.minSize</a>, and <a href="GraphObject.html#maxSize">GraphObject.maxSize</a>.
										Often Infinity.</p>
									</div>
								</li>
								<li>
									<h5>height: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>expected height of the Panel.</p>
									</div>
								</li>
								<li>
									<h5>elements: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><span class="tsd-signature-symbol">[]</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>Array of Panel elements</p>
									</div>
								</li>
								<li>
									<h5>union: <a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>rectangle to be modified to contain the expected union bounds of every element in the Panel,
										to be potentially used in <a href="PanelLayout.html#arrange">arrange</a>.</p>
									</div>
								</li>
								<li>
									<h5>minw: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>expected minimum width of the Panel, informed by any containing Panel. Often zero.</p>
									</div>
								</li>
								<li>
									<h5>minh: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>expected minimum height of the Panel.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-protected">
					<a name="measureElement" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagProtected">Protected</span>
						measure<wbr>Element
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-protected">
						<li class="tsd-signature tsd-kind-icon">measure<wbr>Element<span class="tsd-signature-symbol">(</span>obj<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, minw<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, minh<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Given the available size, measure one element of the Panel and
									determine its expected drawing size. This sets the <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> of the object,
								which can then be used to determine the arrangement of objects in the PanelLayout.</p>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>obj: <a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>Panel which called this layout</p>
									</div>
								</li>
								<li>
									<h5>width: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>expected width of the GraphObject</p>
									</div>
								</li>
								<li>
									<h5>height: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>expected height of the GraphObject</p>
									</div>
								</li>
								<li>
									<h5>minw: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>minimum width of the GraphObject</p>
									</div>
								</li>
								<li>
									<h5>minh: <span class="tsd-signature-type">number</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>minimum height of the GraphObject</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
			</section>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class=" ">
						<a href="../index.html">GoJS <wbr>Class <wbr>Index</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
				</ul>
				<ul class="current">
					<li class="current tsd-kind-class">
						<a href="PanelLayout.html" class="tsd-kind-icon">Panel<wbr>Layout</a>
						<ul>
							<li class=" tsd-kind-constructor tsd-parent-kind-class">
								<a href="PanelLayout.html#constructor" class="tsd-kind-icon">constructor</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="PanelLayout.html#name" class="tsd-kind-icon">name</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="PanelLayout.html#arrange" class="tsd-kind-icon">arrange</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
								<a href="PanelLayout.html#arrangeElement" class="tsd-kind-icon">arrange<wbr>Element</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="PanelLayout.html#measure" class="tsd-kind-icon">measure</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-protected">
								<a href="PanelLayout.html#measureElement" class="tsd-kind-icon">measure<wbr>Element</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="after-current">
				</ul>
			</nav>
		</div>
	</div>
</div>
<div class="tsd w-full max-w-screen-xl mx-auto px-2">
	<div class="bottom-copyright">Copyright &copy; 1998-2021 by Northwoods Software Corporation.</div>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date()); gtag('config', 'UA-1506307-5');
  var getOutboundLink = function(url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }

  // topnav
  var topButton = document.getElementById("topnavButton");
  var topnavList = document.getElementById("topnavList");
  topButton.addEventListener("click", function() {
    this.classList.toggle("active");
    topnavList.classList.toggle("hidden");
    document.getElementById("topnavOpen").classList.toggle("hidden");
    document.getElementById("topnavClosed").classList.toggle("hidden");
  });
</script>
</body>
</html>